<script setup>

import MyNav from "@/components/MyNav.vue";
import MyHead from "@/components/MyHead.vue";
import MyTable from "@/components/MyTable.vue";
import {onBeforeMount, onMounted, ref, shallowReactive, shallowRef} from "vue";
import {dateFormat, genderFormat, getResponseData, myPage} from "@/utils";
import {MINIO_HOST, RULE} from "@/const";
// import {pageApi} from "@/api/EmpAPI";
import {pageApi, saveApi, updateApi} from "@/api/RoomAPI";
import MyPager from "@/components/MyPager.vue";
import MyList from "@/components/MyList.vue";
import MyForm from "@/components/MyForm.vue";
import MyIcon from "@/components/MyIcon.vue";
import MyConfirm from "@/components/MyConfirm.vue";

// 查询数据
let records = ref(null);
// 分页数据
let pageInfo = shallowReactive({
  'currentPage':1, 'pageSize':5, fn:page
});
// 表格数据
let title = '测试标题';
let items = shallowReactive([
  {label:'tag01', value:1, type:'tag', prefix:'No'},
  {label:'tag02', value:2, type:'tag', prefix:'No', tagType:'danger'},
  {label:'avatar01', value:'avatar.png', type:'img', minio:src => MINIO_HOST + '/test/' + src},
  {label:'avatar02', value:'avatar.png', type:'img', minio:src => MINIO_HOST + '/test/' + src, large:true},
  {label:'text01', value:'title'},
  {label:'text02', value:'title', prefix: '《', suffix:'》'},
  {label:'description', value:'my description'},
  {label:'score', value:'3', type:'star'},
  {label:'created', value:new Date(), format:dateFormat},
])

/*
// 表单数据-测试
let formItems = shallowRef([
  {label:'姓名', prop:'name'},
  {label:'年龄', prop:'age', type:'number'},
  {label:'学历', prop:'educationAttainment', type:'select', optionItems:[
      {label: '大学', value: 1},
      {label: '高中', value: 2},
    ]},
  {label:'出生日期', prop:'date', type:'date'},
  {label:'图标', prop:'icon', type:'icon', iconSize:'small'},
  {label:'描述', prop:'info', type:'textarea'},
])
let insertData = shallowReactive({});
let insertRule = {info: RULE.COMMON_INFO}
*/

/*
// 表单数据 - room - insert
let formItems = shallowRef([
  {label:'房间名称', prop:'title'},
  {label:'房间容量', prop:'capacity', type:'number'},
  {label:'房间地址', prop:'address', type:'textarea'},
  {label:'房间描述', prop:'info', type:'textarea'},
])
let data = shallowReactive({});
let rules = {info: RULE.COMMON_INFO}
*/

// 表单数据 - room -update
let formItems = shallowRef([
  {label:'房间名称', prop:'title'},
  {label:'房间容量', prop:'capacity', type:'number'},
  {label:'房间地址', prop:'address', type:'textarea'},
  {label:'房间描述', prop:'info', type:'textarea'},
])
let data = shallowReactive({
  'id':29,
  'title': '教304',
  'capacity': 30,
  'address': '教学楼',
  'info': '教学楼三楼东侧',
});
let rules = {info: RULE.COMMON_INFO}

// 表格中间列数据
// room
const columns = shallowRef([
  {column: ['基础信息', '房间名称'], property: 'title'},
  {column: ['基础信息', '房间地址'], property: 'address', type: 'card'},
  {column: ['基础信息', '房间描述'], property: 'info', type: 'card', format: info => info === '' ? '该房间暂无描述信息' : info},

  {column: ['基础信息', '房间容量'], property: 'capacity', type: 'tag', suffix: '人'},
]);
/*// emp
const columns = shallowRef([
  {column: ['登录信息', '登陆账号'], property: 'username'},
  {column: ['登录信息', '头像地址'], property: 'avatar', type:'img', minio:(url) => MINIO_HOST +'/test/'+ url},
  {column: ['登录信息', '登陆密码'], property: 'password'},

  {column: ['联系方式', '手机号码'], property: 'phone', type: 'card'},
  {column: ['联系方式', '微信号码'], property: 'wechat', type: 'card'},
  {column: ['联系方式', '电子邮箱'], property: 'email', type: 'card'},

  {column: ['基础信息', '真实姓名'], property: 'realname'},
  {column: ['基础信息', '用户性别'], property: 'gender', type: 'tag', format:genderFormat},
  {column: ['基础信息', '用户年龄'], property: 'age', type: 'tag'},
  {column: ['基础信息', '籍贯省份'], property: 'province'},
  {column: ['基础信息', '现居住地'], property: 'address'},
  {column: ['基础信息', '身份证号'], property: 'idcard'},

  {column: ['工作信息', '所属部门'], property: 'fk_dept_id'},
  {column: ['工作信息', '描述信息'], property: 'info'},
  {column: ['工作信息', '入职时间'], property: 'hiredate', format: dateFormat},

])*/

// 表格末尾列数据
const buttons = shallowRef([
  {type: 'info', fn: () => alert('查看详情')},
  {type: 'update', fn: () => alert('修改记录')},
  {type: 'delete', fn: () => alert('删除记录')},
]);

// 异步方法
async function page(pageNum = pageInfo['currentPage'], pageSize = pageInfo['pageSize']){
  // 异步调用
  await myPage({
    'api':pageApi,
    'params':{'pageNum': pageNum, 'pageSize': pageSize},
    'records': records,
    'pageInfo': pageInfo
  })
}

// 加载后分页
onBeforeMount(()=>{
  // 加载即调用
  page();
})

// 插入成功回调函数
function insertSuccess(){
  alert("insert success!")
}

// 修改成功回调函数
function updateSuccess(){
  alert("update success!")
}

function onSuccess(){
  alert('choose yes');
}

</script>

<template>

  <!-- 数据表格 -->
  <div v-if="records" style="margin: 20px 20px">
    <h2>table</h2>
    <my-table :columns="columns" :records="records" :buttons="buttons"/>
  </div>

  <!-- 分页 -->
  <div style="margin: 20px 20px">
    <br><hr><br>
    <h2>pager</h2>
    <my-pager :page-info="pageInfo"/>
  </div>

  <!-- 单条记录表格 -->
  <div style="margin: 20px 20px">
    <br><hr><br>
    <h2>list</h2>
    <my-list :title="title" :items="items"/>
  </div>

  <!-- 表单 -->
  <div style="margin: 20px 200px">
    <br><hr><br>
    <h2>form</h2>
    <h2>添加记录</h2>
    <my-form type="insert"
             :api="saveApi"
             :rule="rules"
             :data="data"
             :items="formItems"
             :fn="insertSuccess"
    />
    <h2>修改记录</h2>
    <my-form type="update"
             :api="updateApi"
             :rule="rules"
             :data="data"
             :items="formItems"
             :fn="updateSuccess"
    />
  </div>

<  <!-- 图标标题 -->
  <div>
    <br><hr><br>
    <h2>icon-text</h2>
    <my-icon icon="Apple" label="苹果" size="10"/><br>
    <my-icon icon="Delete" label="删除" size="20"/><br>
    <my-icon icon="FullScreen" label="全屏" size="40"/><br>
  </div>>

  <!-- 确认提示框 -->
  <div>
    <br><hr><br>
    <h2>confirm</h2>
    <my-confirm title="确定退出？" :fn=onSuccess  label="EXIT" type="primary"/>
  </div>

  <br><hr><br>

</template>

<style scoped lang="scss">

</style>